<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region是让其好折叠
			//#region  
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						//这里加immediate 是因为刚开始展示filPerson是空的 immediate让函数立即执行，indexOf('')空串得到的是0
						immediate:true,
						//val是新的更改的值
						handler(val){
							// filter是过滤出来符合条件的,返回一个全新数组，因此要重新赋值	
							// 这里必须得一个新的列表 不然更改了原始数据会导致越查询越少
							// indexof得到包含字符的索引值 
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					//计算属性的调用时机 1、一上来就调用 2、依赖的数据发生变化时调用
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 

 
			//基本功 Array filter函数 数组的浅拷贝 不会改变原数组
			// const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
			// const result = words.filter(word => word.length > 6);
			// console.log(result);
			// // Expected output: Array ["exuberant", "destruction", "present"]
		</script>
</html>